<template>
  <view class="countdown-wrapper" :style="{ right: right + 'px', top: top + 'px' }">
    <text class="countdown-text">{{ seconds }}</text>
  </view>
</template>

<script>
export default {
  data() {
    return {
      totalSeconds: 0, // 总倒计时秒数，可由外部传入
      hours: 0,
      minutes: 0,
      seconds: 0,
      timer: null, // 定时器标识
      right: 10, // 初始横向位置，可根据需求调整
      top: 10 // 初始纵向位置，可根据需求调整
    };
  },
  props: {
    // 接收外部传入的总倒计时秒数
    countdownSeconds: {
      type: Number,
      default: 0
    }
  },
  mounted() {
    this.totalSeconds = this.countdownSeconds;
    this.startTimer();
  },
  methods: {
    startTimer() {
      const that = this;
      that.timer = setInterval(() => {
        if (that.totalSeconds > 0) {
          that.totalSeconds--;
          that.updateTime();
        } else {
          clearInterval(that.timer);
          // 可在这里触发一个自定义事件，通知外部倒计时结束
          that.$emit('countdown-finished');
        }
      }, 1000);
    },
    updateTime() {
      this.hours = Math.floor(this.totalSeconds / 3600);
      this.minutes = Math.floor((this.totalSeconds % 3600) / 60);
      this.seconds = this.totalSeconds % 60;
    }
  },
  beforeDestroy() {
	  console.log("定时器被清除了")
    clearInterval(this.timer);
  }
};
</script>

<style scoped>
.countdown-wrapper {
  position: fixed; /* 使其固定在页面上，实现浮动效果 */
  background-color: rgba(0, 0, 0, 0.5); /* 半透明背景，可根据喜好调整 */
  color: white;
  padding: 10px;
  border-radius: 5px;
  z-index: 999; /* 确保显示在其他元素之上 */
}
.countdown-text {
  font-size: 16px;
}
</style>